<!--
 * @Author: xiaobaobeibai 604070135@qq.com
 * @Date: 2022-08-01 22:49:37
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-15 09:30:24
 * @FilePath: /huizhou-management-end/src/views/about_us/contact_us/components/list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div>
    <div style="height:30px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>联系我们</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="never"
      class="mb20">
      <div slot="header">
        <el-button
          type="primary"
          @click="disabled = false">编辑</el-button>
      </div>
      <el-form ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="110px"
        class="demo-ruleForm">
        <el-form-item
          label="联系人姓名"
          prop="name">
          <el-input
            v-model="ruleForm.name"
            :disabled="disabled"
            placeholder="请输入联系人姓名"
            style="width:70%" />
        </el-form-item>
        <el-form-item
          label="联系人电话"
          prop="mobile">
          <el-input
            v-model="ruleForm.mobile"
            :disabled="disabled"
            placeholder="请输入联系人姓名"
            style="width:70%" />
        </el-form-item>
        <el-form-item
          label="联系人邮箱"
          prop="email">
          <el-input
            v-model="ruleForm.email"
            :disabled="disabled"
            placeholder="请输入联系人姓名"
            style="width:70%" />
        </el-form-item>
        <el-form-item
          label="公司地址"
          prop="address">
          <el-input
            v-model="ruleForm.address"
            :disabled="disabled"
            placeholder="请输入联系人姓名"
            style="width:70%" />
        </el-form-item>
        <el-form-item label=""
          prop="">
          <el-button
            type="primary"
            :disabled="disabled"
            @click="submit()">保存</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
export default {
  name: 'ActiveList',
  data() {
    return {
      ruleForm: {
        address: '',
        companyProfile: '',
        email: '',
        mobile: '',
        name: ''
      },
      disabled: true,
      rules: {
        name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入联系人邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    /**
     * @description: 获取数据列表
     * @param {type}
     * @return:
     */
    getTableList() {
      this.tableLoading = true
      REQUEST_LIST.REQUST_FCN(
        'CONTACTUS',
        {
          pageNum: 1,
          pageSize: 1000
        },
        true
      ).then(res => {
        this.ruleForm = res.data.contactUs
        this.tableLoading = false
      })
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const data = {
            address: this.ruleForm.address,
            email: this.ruleForm.email,
            mobile: this.ruleForm.mobile,
            name: this.ruleForm.name,
            id: 1
          }
          REQUEST_LIST.REQUST_FCN('CONTACTUSEDIT', data, true).then(res => {
            if (res.status === 200) {
              this.getTableList()
              this.disabled = true
              this.$message.success('修改成功！')
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.companyProfile_box {
  overflow: hidden;
}
.companyProfile_box p span {
  display: block;
  line-height: 1.7;
  text-indent: 2em;
}
</style>
